<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<layout>
				<a href="">asdfasdf</a>
				<div slot="header">
					<h1>页面标题</h1>
				</div>
				<div>
					<h3>主要内容</h3>
				</div>
				<div slot="footer">
					<h1>页面底部</h1>
				</div>
				<button>click</button>
			</layout>
		</div>
	</body>
</html>

<script type="text/x-template" id="tpl">
	<div class="containter">
		<header>
			<slot name="header">header</slot>
		</header>
		
		<div class="main">
			<slot>main</slot>
		</div>
		
		<footer>
			<slot name="footer">footer</slot>
		</footer>
	</div>
</script>

<script type="text/javascript">
	const layout = {
		template: '#tpl'
		
	}
	
	new Vue({
		el: '#app',
		components: {
			layout
		}
	})
</script>
